<template>
    <el-form ref="phoneLoginRef" :model="formData" :rules="rules">
        <el-form-item prop="phone">
            <el-input
                    placeholder="手机号"
                    v-model="formData.phone"
                    clearable>
            </el-input>
        </el-form-item>
        <!--动态码-->
        <el-form-item prop="verificationCode">
            <el-input placeholder="动态码" v-model.number="formData.verificationCode">
                <template slot="append">
                    <el-button v-show="show" @click="getCode">获取动态码</el-button>
                    <span v-show="!show">{{codeTime}} s</span>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-row type="flex" class="row-bg" justify="center">
                <el-button type="success" @click="login">登录</el-button>
                <el-button type="info" @click="reset">重置</el-button>
            </el-row>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "PhoneLogin",
        data() {

            return {
                //表单的数据
                formData: {
                    //手机号
                    phone: '',
                    //验证码
                    verificationCode: '',
                    //加密信息
                    information: ''
                },
                rules: {
                    //规则
                    phone: [
                        {required: true, message: '手机号必填！', trigger: 'blur'},
                        {pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号！', trigger: 'blur'}],
                    verificationCode: [
                        {required: true, message: '动态码必填！', trigger: 'blur'},
                        {type: 'number', message: '动态码为数值！', trigger: 'blur'}
                    ]
                },
                //倒计时时间
                codeTime: 60,
                //是否显示
                show: true,
                //时间迭代器
                timer: null,
                //验证码长度
                codeLength: 4
            }
        },
        methods: {
            reset() {
                //重置表单
                this.$refs.phoneLoginRef.resetFields();
            },
            async getCode() {
                //先进行手机号验证
                let flag = true;
                //单个表单项的验证
                this.$refs.phoneLoginRef.validateField('phone', (result => {
                    if (result !== '') {
                        //不通过
                        flag = false;
                    }
                }));
                if (!flag) {
                    //不通过直接返回
                    return;
                }
                //获取验证码
                const TIME_COUNT = 60;
                //判断是否开启倒计时
                if (!this.timer) {
                    this.codeTime = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.codeTime > 0 && this.codeTime <= TIME_COUNT) {
                            this.codeTime--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000);
                    //请求验证码
                    console.log(this.formData);
                    // const {data: msg} = await this.$http.get('/login/code', {params: {'phone': this.formData.phone}});
                    const {data: msg} = await this.$http.post('/login/code', {'phone': this.formData.phone});//后端交互
                    if (msg.flag) {
                        //请求成功，设置进session域
                        window.sessionStorage.setItem("phoneLoginInformation",msg.information);
                    } else {
                        this.$message.error(msg.message);
                    }
                }
            },
            async login() {
                //登录
                //先进行表单验证
                this.$refs.phoneLoginRef.validate(async result => {
                    if (result) {
                        //通过
                        let information = window.sessionStorage.getItem("phoneLoginInformation");
                        let loginFormDate = this.formData;
                        loginFormDate.information = information;
                        console.log(loginFormDate);
                        // const {data: msg} = await this.$http.get('/login/login', {params: loginFormDate});
                        const {data: msg} = await this.$http.post('/login/phone',  loginFormDate);//后端交互
                        console.log(msg);
                        // const {data:msg} = this.$http.post('', this.formData);
                        if (msg.flag) {
                            //登录成功
                            await this.$router.push({name: "Home"});
                        }else {
                            this.$message.error(msg.message);
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>

</style>